// 定义轮播图的图片文件名数组
var imgs = ["lun1.jpg", "lun2.webp", "lun3.webp", "lun4.webp"];
// 获取所有类名为 lunbo_b 的元素
var array = document.getElementsByClassName("lunbo_b");
// 轮播图计数器，初始值为 0
var cnt = 0; 

/**
 * 此函数用于自动播放轮播图
 */
function bofang() {
    // 1. 将当前轮播图对应的小圆点背景色设为灰色（表示非当前选中）
    array[cnt].style.backgroundColor = "#8B8594";
    
    // 2. 计数器递增，指向下一张图片
    cnt++;
    
    // 3. 关键逻辑：如果计数器达到图片数组长度（越界），则重置为 0
    // 这就是实现"最后一张切回第一张"的核心代码
    if (cnt == imgs.length)
        cnt = 0;
    
    // 4. 将新的当前图片对应的小圆点背景色设为白色（表示选中状态）
    array[parseInt(cnt)].style.backgroundColor = "#ffffff";
    
    // 5. 更新轮播图的图片源，显示新的当前图片
    document.getElementById("lunbo_i").src = "img/" + imgs[cnt];
}

/**
 * 此函数用于点击小圆点时切换轮播图
 * @param {number} n - 点击的小圆点的索引
 */
function dian(n) {
    // 将当前轮播图对应的小圆点背景颜色设置为 #8B8594
    array[cnt].style.backgroundColor = "#8B8594";
    // 将计数器设置为点击的小圆点的索引
    cnt = n;
    // 将点击的小圆点背景颜色设置为白色
    array[cnt].style.backgroundColor = "#ffffff";
    // 更新轮播图的图片源
    document.getElementById("lunbo_i").src = "img/" + imgs[cnt];
}

/**
 * 此函数用于切换到上一张轮播图
 */
function shang() {
    // 将当前轮播图对应的小圆点背景颜色设置为 #8B8594
    array[cnt].style.backgroundColor = "#8B8594";
    // 计数器减 1
    cnt--;
    // 如果计数器小于 0，将计数器设置为图片数组的长度减 1
    if (cnt < 0)
        cnt = imgs.length - 1;
    // 将上一张轮播图对应的小圆点背景颜色设置为白色
    array[cnt].style.backgroundColor = "#ffffff";
    // 更新轮播图的图片源
    document.getElementById("lunbo_i").src = "img/" + imgs[cnt];
}

/**
 * 此函数用于切换到下一张轮播图
 */
function xia() {
    // 将当前轮播图对应的小圆点背景颜色设置为 #8B8594
    array[cnt].style.backgroundColor = "#8B8594";
    // 计数器加 1
    cnt++;
    // 如果计数器达到图片数组的长度，将计数器重置为 0
    if (cnt == imgs.length)
        cnt = 0;
    // 将下一张轮播图对应的小圆点背景颜色设置为白色
    array[cnt].style.backgroundColor = "#ffffff";
    // 更新轮播图的图片源
    document.getElementById("lunbo_i").src = "img/" + imgs[cnt];
}

/**
 * 此函数用于隐藏一个元素并显示另一个元素
 * @param {string} n - 要隐藏的元素的 id
 * @param {string} m - 要显示的元素的 id
 */
function gaibian(n, m) {
    // 获取要隐藏的元素
    var cd1 = document.getElementById(n);
    // 获取要显示的元素
    var cd2 = document.getElementById(m);
    // 隐藏要隐藏的元素
    cd1.style.display = "none";
    // 显示要显示的元素
    cd2.style.display = "inline-block";
}

/**
 * 此函数用于切换穿戴商品分类的显示内容
 * @param {number} n - 当前选中的分类编号
 * @param {number} m - 上一个选中的分类编号
 */
function chuandai(n, m) {
    // 获取所有类名为 main_top_right1_p 的元素
    var arr = document.getElementsByClassName("main_top_right1_p");
    // 设置当前选中的分类文字颜色为 #FF6700
    arr[parseInt(n - 1)].style.color = "#FF6700";
    // 设置当前选中的分类文字加粗
    arr[parseInt(n - 1)].style.fontWeight = "600";
    // 设置上一个选中的分类文字颜色为黑色
    arr[parseInt(m - 1)].style.color = "#000000";
    // 设置上一个选中的分类文字正常粗细
    arr[parseInt(m - 1)].style.fontWeight = "400";
    // 生成当前选中的分类对应的内容区域的 id
    var n = "chuandai" + n;
    // 生成上一个选中的分类对应的内容区域的 id
    var m = "chuandai" + m;
    // 隐藏上一个分类的内容区域，显示当前分类的内容区域
    gaibian(n, m);
}

/**
 * 此函数用于切换家电商品分类的显示内容
 * @param {number} n - 当前选中的分类编号
 * @param {number} m - 上一个选中的分类编号
 */
function jiadian(n, m) {
    // 获取所有类名为 main_top_right2_p 的元素
    var arr = document.getElementsByClassName("main_top_right2_p");
    // 设置当前选中的分类文字颜色为 #FF6700
    arr[parseInt(n - 1)].style.color = "#FF6700";
    // 设置当前选中的分类文字加粗
    arr[parseInt(n - 1)].style.fontWeight = "600";
    // 设置上一个选中的分类文字颜色为黑色
    arr[parseInt(m - 1)].style.color = "#000000";
    // 设置上一个选中的分类文字正常粗细
    arr[parseInt(m - 1)].style.fontWeight = "400";
    // 生成当前选中的分类对应的内容区域的 id
    var n = "jiadian" + n;
    // 生成上一个选中的分类对应的内容区域的 id
    var m = "jiadian" + m;
    // 隐藏上一个分类的内容区域，显示当前分类的内容区域
    gaibian(n, m);
}

/**
 * 此函数用于实现页面滚动返回顶部的效果
 */
function gundong() {
    // 获取页面滚动的垂直距离
    var backtop = document.documentElement.scrollTop;
    // 计算滚动速度
    var speedTop = Math.ceil(parseFloat(backtop / 5));
    // 减少页面滚动的垂直距离
    document.documentElement.scrollTop = backtop - speedTop;
    // 如果滚动距离为 0，清除定时器
    if (backtop == 0) {
        clearInterval(timer);
    }
}